<script lang="ts" setup>
import dayjs from 'dayjs';
import { reactive, onMounted, computed } from 'vue';
import { eventCenter, getCurrentInstance, navigateTo } from '@tarojs/taro';
import { ALARM_DEAL_TYPE } from '/@/common/constant';
import { QUERY_ALARM_DETAIL, ALARM_READ } from '/@/api/modules/base/alarm';
import { appEvents } from '/@/utils/events';

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  id: string;
};

const state = reactive<{
  info: AppMessageAlarm.Dto;
}>({
  info: {},
});

/**
 * 录音文件地址
 */
const audioUrl = computed(() => {
  if (!state.info.messageAlarmFileDto || !state.info.messageAlarmFileDto.length) return '';

  const audioFileList = state.info.messageAlarmFileDto.filter((file) => {
    return file.fileType === 2;
  });

  return audioFileList && audioFileList.length ? audioFileList[0].fileUrl : '';
});

/**
 * 图片文件列表
 */
const imgList = computed(() => {
  if (
    !state.info.messageAlarmFileDto ||
    !state.info.messageAlarmFileDto.length ||
    !state.info.messageAlarmDealFileDto ||
    !state.info.messageAlarmDealFileDto.length
  )
    return [];

  return [
    ...(state.info.messageAlarmFileDto as AppMessageAlarm.FileDto[]),
    ...(state.info.messageAlarmDealFileDto as AppMessageAlarm.FileDto[]),
  ]
    .filter((file) => {
      return file.fileType === 1;
    })
    .map((file) => {
      return {
        key: file.id || '',
        src: file.fileUrl || '',
      };
    });
});

onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    QUERY_ALARM_DETAIL({ id: params.id }).then((res) => {
      state.info = res.content;

      ALARM_READ({ id: params.id }).then(() => {
        appEvents.trigger('alarmItemRead', { id: params.id });
      });
    });
  });
});
</script>

<template>
  <view class="alarm-detail app-page--1">
    <app-navbar title="告警详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="alarm-detail__wrapper">
        <nut-form>
          <nut-form-item class="nut-form__title-wrapper" label="告警等级" body-align="right">
            <nut-tag
              :type="{ 1: 'primary', 2: 'warning', 3: 'danger' }[state.info.alarmLevelId || 1] as 'primary' | 'warning' | 'danger'"
            >
              {{ state.info.alarmLevelName }}
            </nut-tag>
          </nut-form-item>
          <nut-form-item label="告警时间" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{
                state.info.alarmTime
                  ? dayjs(Number(state.info.alarmTime)).format('YYYY-MM-DD HH:mm:ss')
                  : '-'
              }}</text>
            </view>
          </nut-form-item>
          <nut-form-item label="告警类型" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{ state.info.alarmTypeName || '-' }}</text>
            </view>
          </nut-form-item>
          <nut-form-item label="子系统" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{ state.info.subSystemName || '-' }}</text>
            </view>
          </nut-form-item>
          <nut-form-item label="告警设备" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{ state.info.alarmResName || '-' }}</text>
            </view>
          </nut-form-item>
          <nut-form-item label="告警地点" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{ state.info.areaName || '-' }}</text>
            </view>
          </nut-form-item>
          <nut-form-item label="告警详情" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{ state.info.alarmDetail || '-' }}</text>
            </view>
          </nut-form-item>
          <nut-form-item v-if="audioUrl" label="语音" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <audio class="app-media-recorder__audio" :src="audioUrl" />
            </view>
          </nut-form-item>
          <nut-form-item v-if="imgList && imgList.length" label="图片" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <app-upload-image :default-image-list="imgList" :readonly="true" />
            </view>
          </nut-form-item>
        </nut-form>

        <nut-form v-if="state.info.alarmResolveState === 2">
          <nut-form-item class="nut-form__title-wrapper" label="告警处理" />
          <nut-form-item label="处理状态" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text
                :style="{ color: { 1: '#999', 2: '#4fc08d' }[state.info.alarmResolveState || 1] }"
              >
                {{
                  state.info.alarmResolveState
                    ? { 1: '未处理', 2: '已处理' }[state.info.alarmResolveState]
                    : '-'
                }}
              </text>
            </view>
          </nut-form-item>
          <nut-form-item label="处理方式" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{ state.info.dealType ? ALARM_DEAL_TYPE[state.info.dealType] : '-' }}</text>
            </view>
          </nut-form-item>
          <nut-form-item label="处理人" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{ state.info.dealUserName || '-' }}</text>
            </view>
          </nut-form-item>
          <nut-form-item label="操作信息" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text>{{ state.info.dealDesc || '-' }}</text>
            </view>
          </nut-form-item>
          <nut-form-item v-if="state.info.dealWorkOrder" label="关联工单" body-align="right">
            <view class="nut-form-item__content-wrapper has-value">
              <text
                class="alarm-detail__deal-work-order-num"
                @click="
                  navigateTo({
                    url: `/pages/work-order/detail/index?id=${state.info.dealWorkOrder}&from=default`,
                  })
                "
              >
                {{ state.info.dealWorkOrder || '-' }}
              </text>
            </view>
          </nut-form-item>
        </nut-form>
      </view>
    </scroll-view>

    <view v-if="state.info.alarmResolveState === 1" class="alarm-detail__footer">
      <nut-button
        class="alarm-detail__footer-btn"
        shape="round"
        size="small"
        type="info"
        @click="
          navigateTo({
            url: `/pages/alarm/handle/index?id=${params.id}&dealType=2`,
          })
        "
      >
        误报
      </nut-button>
      <nut-button
        class="alarm-detail__footer-btn"
        shape="round"
        size="small"
        type="info"
        @click="
          navigateTo({
            url: `/pages/alarm/handle/index?id=${params.id}&dealType=3`,
          })
        "
      >
        已解决
      </nut-button>
      <nut-button
        class="alarm-detail__footer-btn"
        shape="round"
        size="small"
        type="info"
        @click="
          navigateTo({
            url: `/pages/alarm/handle/index?id=${params.id}&dealType=4`,
          })
        "
      >
        忽略
      </nut-button>
      <nut-button
        class="alarm-detail__footer-btn"
        shape="round"
        size="small"
        type="warning"
        @click="
          navigateTo({
            url: `/pages/work-order/edit/index?alarmId=${params.id}&from=alarm-handle`,
          })
        "
      >
        转工单
      </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
